<template>
	<view>
		<view class="message" v-for="d in list">
			<view class="title">
				{{ d.title }}
			</view>
			<view class="">
				{{ d.user.tbUser.username }}
				-
				<text :class="{'active': d.exInfo.praised}" @click="praise(d)"> 赞 </text>
				<image @click="praise(d)" class="praised" v-if="d.exInfo.praised" src="/static/3.png"></image>
				<image @click="praise(d)" class="praised" v-if="!d.exInfo.praised" src="/static/2.png"></image>
				-
				<text>{{d.praise}}</text>zz'f
			</view>
			<view class="">
				<image @click="praise(d)" class="praised" v-if="d.exInfo.praised" src="/static/4.png"></image>
				<image @click="praise(d)" class="praised" v-if="!d.exInfo.praised" src="/static/5.png"></image>
				<text>{{d.praise}}</text>
			</view>
		</view>
		<view class="">
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		api,
		tools
	} from '../../api/api.js'

	const info = ref('')
	const page = ref({
		pageSize: 5,
		pageNumber: 1
	})

	const list = ref([])

	const query = () => {
		api.get(`/message/${page.value.pageSize}/${page.value.pageNumber}/2`, {}, (data) => {
			if (data.success) {
				list.value = data.data.data
				page.value = data.data.pageBean
				return
			}
			uni.showModal({
				content: data.message
			})
		});
	}

	const praise = (info) => {
		uni.showLoading({
			title: '点赞处理中...'
		})
		uni.showLoading({
			title: '收藏处理中...'
		})
		api.post(`/message/praise/${info.mid}`, {}, (data) => {
			uni.hideLoading()
			if (data.success) {
				info.exInfo.praised = !info.exInfo.praised
				info.exInfo.praised ? info.praise++ : info.praise--
				return
			}
			uni.showModal({
				content: data.message
			})
		})
	}

	onLoad(() => {
		query()
	})

</script>

<style scoped>
	.active {
		color: #ff0000;
	}

	.praised {
		height: 1rem;
		width: 1rem;
	}
	
	.message {
		border: 1px solid red;
		border-radius: 1rem;
		margin: 1rem;
		padding: 1rem;
	}
	
	.message .title{
		font-size: 1.3rem;
		font-weight: bold;
		color: #0000ff;
	}

</style>